<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">


</head>
<body>

<jsp:include page="${APP_PATH}/common/head-blog.jsp"/>
<a id="userId" data-userId="${user.id}"></a>
<div class="col-sm-12 col-md-12 col-lg-9" style="margin-left: auto;margin-right: auto;">
    <div class="my-3 p-4 rounded bg-white" style="position: relative;">
        <h4 class="border-bottom border-dark pb-2"><i class="fa fa-users"></i>已关注博主</h4>
        <div id="starUsers"></div>
    </div>
    <div id="pageNav"></div>
</div>
<div class="p-4"></div>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>

<script>
function cancelStarUser(ele) {
    var followinguserid = $(ele).attr("data-followingUserId");
    var userId = $("#userId").attr("data-userId");
    if (userId.length !== 16) {
        window.location.href = '/login';
    }
    if (confirm("确认要取消关注该博主吗？")) {
        $.ajax({
            url: '/cancelFollowUser/' + userId + "/" + followinguserid,
            type: 'GET',
            success: function (result) {
                if (result.code === 100) {
                    //删除该div
                    $("div[data-div-flag-userId="+userId+"]").remove();
                    toastr.success("操作成功！");
                } else {
                    toastr.error("操作失败！");
                }
            }
        });
    }
}
function buildPage(result) {
    var $starUsers = $("#starUsers");
    $starUsers.empty();
    $.each(result.extend.pageInfo.list, function (index, item) {
        var $div_media = $("<div data-div-flag-userId='"+item.userid+"' style='position:relative' class='media text-muted py-3'>");
        //添加取消关注按钮
        $div_media.append($("<div style='position:absolute;right:8px;top:0;'><a onclick='cancelStarUser(this)' data-followingUserId='"+item.followinguserid+"' class='btn btn-sm btn-danger text-white'>取关</a></div>"));
        var $img = $("<img src='"+item.followingUser.headimgurl+"' style='object-fit: cover' data-holder-rendered='true' width='40px' height='40px'>");
        var $p = $("<p class='media-body ml-3 pb-3 mb-0 small lh-125 border-bottom border-gray'>");
        var $strong = $("<strong class='d-block text-gray-dark text-lg-left'>@"+item.followingUser.nickname+"</strong>");
        $div_media.append($img).append($p.append($strong).append(item.followingUser.slogan)).appendTo($starUsers);
    })
}

function buildPage_pagenav(result) {
    //page_nav_area
    $("#pageNav").empty();
    var ul = $("<ul></ul>").addClass("pagination");
    //遍历给ul中添加页码提示
    $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
        var numLi = $("<li class='page-item'></li>").append($("<a class='btn btn-sm btn-outline-primary mr-2'></a>").append(item));
        if(result.extend.pageInfo.pageNum === item){
            //当前页按钮，不可点击
            numLi.find("a").removeClass("btn-outline-primary");
            numLi.find("a").addClass("disabled");
            numLi.find("a").addClass("btn-primary");
        }
        numLi.click(function(){
            toPage(item);
        });
        ul.append(numLi);
    });
    ul.appendTo($("#pageNav"));
}

function toPage(pn) {
    $.ajax({
        url:'/getUserFollows/'+pn,
        type:'GET',
        success:function (result) {
            if (result.code === 100) {
                buildPage(result);
                buildPage_pagenav(result);
            }else{
                toastr.error(result.extend.error);
            }
        }
    });
}

$(function () {
    toPage(1);
});
</script>

</body>

</html>
